<template>
  <div class="collect">
    <!-- Add a static page for my favorite module -->
    <div class="collect-header">
      <div class="collect-title">
        <i class="el-icon-collection-tag" style="color: #ff6700"></i>
        产品管理
      </div>
    </div>
    <div class="content">
      <div class="goods-list" v-if="collectList.length > 0">
        <MyList
          :list="collectList"
          :isDelete="true"
          :showLength="collectList.length"
        >
          <template v-slot="item">
            <div class="operation">
              <el-button type="primary" @click="redactBtn(item)">
                编 辑
              </el-button>
              <el-button type="danger" @click="deleteBtn(item)">
                删 除
              </el-button>
            </div>
          </template>
        </MyList>
      </div>
      <!-- 收藏列表为空的时候显示的内容 -->
      <div v-else class="collect-empty">
        <div>
          <h2>您的产品列表还是空的！</h2>
          <!-- <p>快去购物吧！</p> -->
        </div>
      </div>
      <!--  收藏列表为空的时候显示的内容END -->
    </div>

    <div class="btn">
      <el-button
        type="primary"
        style="width: 420px"
        @click="$router.push('./detail')"
      >
        产品上传</el-button
      >
    </div>
    <el-dialog title="编辑商品" :visible.sync="dialogVisible" width="30%">
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        style="padding-top: 30px"
      >
        <el-form-item label="产品名称 ：">
          <el-input v-model="form.productName" style="width: 280px"></el-input>
        </el-form-item>
        <el-form-item label="产品标题 ：">
          <el-input v-model="form.title" style="width: 280px"></el-input>
        </el-form-item>
        <el-form-item label="产品简介 ：">
          <el-input v-model="form.productIntro" style="width: 280px"></el-input>
        </el-form-item>
        <el-form-item label="图片上传 ：">
          <el-upload
            :file-list="fileList"
            action="http://localhost:7001/product-upload/image-upload"
            list-type="picture-card"
            :on-success="success"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import{ getCompany,searchCompany,deleteCompany}  from "@/api/api.js";
import { mapGetters } from "vuex";
export default {
  name: "home",

  components: {},
  data() {
    return {
      fileList: [],
      dialogVisible: false,
      form: {},
      serach: "",
      collectList: [],
    };
  },

  methods: {
    getData() {
      // 获取收藏数据
      this.$axios
        .post(
          "product-upload/get-product",
          {
            user_id: this.$store.getters.getUser.businessId,
          },
          { withCredentials: true }
        )
        .then((res) => {
          if (res.data.code === "001") {
            this.collectList = res.data.collectList;
          }
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
    //删除
    deleteBtn(row) {
      this.$axios
        .post(
          "/product-upload/delete",
          {
            productId: row.scope.productId,
          },
          { withCredentials: true }
        )
        .then(() => {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.getData();
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },

    redactBtn(row) {
      console.log(row);
      this.dialogVisible = true;
      this.form = row.scope;
      this.fileList.url = row.scope.productPicture;
    },
    success(res) {
      console.log(res);
      this.form.imgUrl = res.url;
      //res.url = this.form.imgUrl;
    },
    update() {
      const fromData = new FormData();
      fromData.append("productName", this.form.productName);
      fromData.append("productTitle", this.form.productTitle);
      fromData.append("productIntro", this.form.productIntro);
      fromData.append("imgUrl", this.form.imgUrl);
      fromData.append("productId", this.form.productId);
      this.$axios
        .post("/product-upload/updata", fromData)
        .then((res) => {
          this.$message({ message: res.msg, type: "success" });
          this.getData();
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
  },
  computed: {
    ...mapGetters(["getUser"]),
  },
  activated() {
    this.getData();
  },
};
</script>

<style scoped>
.collect {
  background-color: #f5f5f5;
}
.collect .collect-header {
  height: 64px;
  background-color: #fff;
  border-bottom: 2px solid #ff6700;
}
.collect .collect-header .collect-title {
  width: 1225px;
  margin: 0 auto;
  height: 64px;
  line-height: 58px;
  font-size: 28px;
}
.collect .content {
  padding: 20px 0;
  width: 1225px;
  margin: 0 auto;
}
.collect .content .goods-list {
  margin-left: -13.7px;
  overflow: hidden;
}
/* 收藏列表为空的时候显示的内容CSS */
.collect .collect-empty {
  width: 1225px;
  margin: 0 auto;
}
.collect .collect-empty .empty {
  height: 300px;
  padding: 0 0 130px 558px;
  margin: 65px 0 0;
  /* background: url(~@/assets/imgs/cart-empty.png) no-repeat 124px 0; */
  color: #b0b0b0;
  overflow: hidden;
}
.collect .collect-empty .empty h2 {
  margin: 70px 0 15px;
  font-size: 36px;
}
.collect .collect-empty .empty p {
  margin: 0 0 20px;
  font-size: 20px;
}
.operation {
  width: 100%;
  margin: 30px;
}
>>> .myList ul li {
  height: 340px !important;
}
.btn {
  display: flex;
  justify-content: center;
}
.btn button {
  text-align: center;
}
/* 收藏列表为空的时候显示的内容CSS END */
</style>

